<template>
  <el-dialog
    :title="title"
    :visible.sync="dialog.isShow"
    width="800px"
    top="70px"
    :close-on-click-modal="false"
    @open="openDialog"
  >
    <div class="el-dialog-div">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-form
          ref="addForm"
          :model="formInline"
          inline
          :rules="rules"
          :disabled="pageType==='detail'"
        >
          <el-form-item label="单据类型" prop="lngreceipttypeid">
            <BillTemplateTypeSelect
              v-model="formInline.lngreceipttypeid"
              style="width:260px"
              :disabled="pageType!=='add'"
            />
          </el-form-item>
          <el-form-item label="单据模板名称" prop="strbilltemplatename">
            <el-input
              v-model.trim="formInline.strbilltemplatename"
              style="width:230px"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" icon="el-icon-plus" @click="addRow">添加</el-button>
          </el-form-item>
          <el-table
            class="tb-edit"
            :header-cell-style="{background:'#F5F4F7'}"
            border
            stripe
            style="width:100%;"
            :data="list"
          >
            <el-table-column
              v-if="pageType!=='detail'"
              width="40"
              align="center"
            >
              <template slot-scope="scope">
                <span style="cursor:pointer;color:red;" @click="DeleteRow(scope)">
                  <i class="el-icon-remove-outline" />
                </span>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="55"
              align="center"
            />
            <el-table-column prop="lngparamid" label="扩展字段">
              <template v-slot="scope">
                <el-select
                  v-model="scope.row.lngparamid"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width:100%"
                  :disabled="scope.row.lngbilltemplatedetailid>0"
                  @change="changeParam($event,scope.row)"
                >
                  <el-option
                    v-for="(item,index) in extendList"
                    :key="index"
                    :label="item.strparamname"
                    :value="item.lngparamid"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="strfieldname" label="显示名称">
              <template v-slot="scope">
                <el-input
                  v-model="scope.row.strfieldname"
                />
              </template>
            </el-table-column>
            <el-table-column prop="blnisnotnull" label="是否必填">
              <template v-slot="scope">
                <el-switch
                  v-model="scope.row.blnisnotnull"
                  active-color="#3FBEB8"
                  inactive-color="#B7B7B7"
                  :active-value="1"
                  :inactive-value="0"
                />
              </template>
            </el-table-column>
            <el-table-column prop="lngfrombilltemplateid" label="来源单据">
              <template v-slot="scope">
                <el-select
                  v-model="scope.row.lngfrombilltemplateid"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width:100%"
                  @change="changeFromBill(scope)"
                >
                  <el-option
                    v-for="(item,index) in scope.row.fromBillList"
                    :key="index"
                    :label="item.strbilltemplatename"
                    :value="item.lngbilltemplateid"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="lngfromtemplatdetailid" label="来源字段">
              <template v-slot="scope">
                <el-select
                  v-model="scope.row.lngfromtemplatdetailid"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width:100%"
                >
                  <el-option
                    v-for="(item,index) in scope.row.fromDetailList"
                    :key="index"
                    :disabled="!!item.blnisinactive"
                    :label="item.strfieldname"
                    :value="item.lngbilltemplatedetailid"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="intnum" label="排序">
              <template v-slot="scope">
                <el-input
                  v-model="scope.row.intnum"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-scrollbar>
    </div>
    <div v-if="pageType !== 'detail'" slot="footer">
      <el-button type="primary" @click="add">确 定</el-button>
      <el-button type="primary" @click="addMulti">保存并新增</el-button>
      <el-button @click="dialog.isShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addOrUpdateFn, findByIdFn, getBilltemplateFn, getBilltemplatedetailFn } from '@/api/system/bill-setting/bill-template'
import { findParamListFn } from '@/api/basic-setting/data-dictionary/outitemtemp'

export default {
  name: 'BillTemplateDialog',
  data() {
    const modelForm = {
      billtemplatedetailheadList: [],
      // billtemplatedetailbodyList: [{}],
      lngbilltemplateid: '',
      lngreceipttypeid: '',
      strbilltemplatename: ''
    }
    return {
      dialog: {
        isShow: false
      },
      list: [],
      fromBillTemplateList: [],
      extendList: [],
      pageType: 'add',
      formInline: modelForm,
      initForm: Object.assign({}, modelForm),
      rules: {
        lngreceipttypeid: [{ required: true, message: '必填字段', trigger: 'blur' }],
        strbilltemplatename: [{ required: true, message: '必填字段', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title() {
      const obj = {
        'add': '新增',
        'edit': '编辑',
        'detail': '查看'
      }
      return obj[this.pageType] || '新增'
    }
  },
  created() {
  },
  methods: {
    show() {
      this.dialog.isShow = true
    },
    resetForm() {
      this.formInline = Object.assign({}, this.initForm)
      this.$nextTick(() => {
        this.$refs.addForm.clearValidate()
      })
      this.list = []
    },
    findParamListFn() {
      findParamListFn({
        blnisinactive: this.pageType === 'add' ? 0 : ''
      }).then(res => {
        if (res.code === 20000) {
          this.extendList = res.data
        }
      })
    },
    changeParam(e, row) {
      const one = this.extendList.find(el => { return el.lngparamid * 1 === e * 1 })
      row.strfieldname = one.strparamname
    },
    openDialog() {
      this.resetForm()
      this.findParamListFn()
      this.getBilltemplateFn()
    },
    addRow() {
      const list = {
        blnisnotnull: 0,
        intnum: this.list.length + 1,
        strfieldname: '',
        lngparamid: '',
        lngfrombilltemplateid: '',
        lngfromtemplatdetailid: '',
        lngbilltemplatedetailid: '',
        fromBillList: this.fromBillTemplateList,
        fromDetailList: []
      }
      this.list.push(list)
    },
    DeleteRow(scope) {
      this.list.splice(scope.$index, 1)
    },
    addMulti() {
      this.add('multi')
    },
    add(str) {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.formInline.billtemplatedetailheadList = this.list.map(item => {
            return {
              lnisnotnull: item.lnisnotnull,
              intnum: item.intnum,
              strfieldname: item.strfieldname,
              lngparamid: item.lngparamid,
              lngfrombilltemplateid: item.lngfrombilltemplateid,
              lngfromtemplatdetailid: item.lngfromtemplatdetailid,
              lngbilltemplatedetailid: item.lngbilltemplatedetailid || ''
            }
          })
          addOrUpdateFn(this.formInline).then(res => {
            if (res.code === 20000) {
              this.$message.success(res.message)
              this.$emit('refresh')
              if (str === 'multi') {
                this.openDialog()
                return false
              }
              this.dialog.isShow = false
            }
          })
        }
      })
    },
    findById(id) {
      findByIdFn(id).then(res => {
        if (res.code === 20000) {
          Object.keys(this.formInline).forEach(val => {
            this.formInline[val] = res.data[val]
          })
          this.list = []
          this.formInline.billtemplatedetailheadList.forEach(async item => {
            const res = await getBilltemplatedetailFn({
              blnisinactive: '',
              lngbilltemplateid: item.lngfrombilltemplateid
            })
            item.lngfrombilltemplateid = item.lngfrombilltemplateid === 0 ? '' : item.lngfrombilltemplateid
            item.lngfromtemplatdetailid = item.lngfromtemplatdetailid === 0 ? '' : item.lngfromtemplatdetailid
            this.list.push({
              fromBillList: this.fromBillTemplateList,
              fromDetailList: res.data,
              ...item
            })
          })
        }
      })
    },
    // 修改来源单据
    changeFromBill(scope) {
      this.getBilltemplatedetailFn(scope, {
        blnisinactive: this.pageType === 'add' ? 0 : '',
        lngbilltemplateid: scope.row.lngfrombilltemplateid
      })
    },
    // 来源单据
    getBilltemplateFn() {
      getBilltemplateFn().then(res => {
        if (res.code === 20000) {
          this.fromBillTemplateList = res.data
        }
      })
    },
    // 来源字段
    getBilltemplatedetailFn(scope, item) {
      getBilltemplatedetailFn(item).then(res => {
        if (res.code === 20000) {
          this.$set(scope.row, 'fromDetailList', res.data)
        }
      })
    }
  }
}
</script>
